<template>
	<view class="typeList">
		<Header />
		<!-- 左右布局 -->
		<view class="list-main">
			<view class="list-left">
				<view 
				class="title" 
				v-for="item in firstTypes" 
				:key="item.id"
				:class="current == item.id ? 'active' : ''"
				@click="chooseType(item.id)"
				>
					{{ item.categoryName }}
				</view>
			</view>
			<view class="list-right">
				<scroll-view scroll-y="true"  :style="'height:' + height + 'px'" >
					<view>
						<!-- image -->
						<view class="right-image">
							<image src="https://oss.xuexiluxian.cn/xiaoluxian-vcr/8d17a3bb498b46cda3fe8a3388e73e55.png" mode=""></image>
						</view>
						<view class="right-content">
							<view class="right-content-item" v-for="(item,index) in secondCategorys" :key="index">
								<image :src="item.thumbnail" mode=""></image>
								<text>{{ item.categoryName }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "../../components/common/Header.vue"
	// 引入请求一级分类的接口函数
	import { getFirstTypes,getSecondCategorys } from "../../api/course"
	// 引入含有动态计算高度的混入
	import { mixins } from '../../mixins/mixins.js'
	
	export default {
		mixins:[mixins],
		data() {
			return {
				current:-1,
				firstTypes:[
					{
						id:-1,
						categoryName:'全部'
					}
				],
				secondCategorys:[],
				secondCategorysParams:{categoryId:-1},
				height:0
			}
		},
		components:{
			Header
		},
		methods:{
			// 一级分类点击事件
			chooseType(id) {
				this.current = id
				this.secondCategorysParams.categoryId = id
				this.getSecondTypes()
			},
			// 二级分类
			getSecondTypes() {
				getSecondCategorys(this.secondCategorysParams).then(res => {
					this.secondCategorys = res.list
				})
			}
		},
		mounted() {
			getFirstTypes().then(res => {
				this.firstTypes = [...this.firstTypes,...res.list]
			})
			this.getSecondTypes()
		},
		onReady() {
			// 注意：动态获取高度一定得在onReady生命周期中执行，因为onMounted中无法找到dom
			this.height = this.getHeight('.header-search')
		}
	}
</script>

<style>
	.list-main {
		display: flex;
		justify-content: space-between;
	}
	.list-left {
		width: 217rpx;
		line-height: 77rpx;
		color: #777;
		text-align: center;
		background: rgba(247,249,255,0.39);
	}
	.list-left > view{
		padding: 18rpx 0;
	}
	.list-right {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.right-image {
		padding: 0 34rpx;
	}
	.right-image image {
		width: 479rpx;
		height: 192rpx;
		border-radius: 17rpx;
	}
	.right-content {
		display: flex;
		flex-wrap: wrap;
	}
	.right-content-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33.33%;
		margin-top: 44rpx;
		padding: 18rpx 0;
	}
	.right-content-item image{
		width: 83rpx;
		height: 83rpx;
	}
	.active {
		color: #3708ef;
		font-weight: 400;
		position: relative;
	}
	.active::before {
		content: '';
		position: absolute;
		left: 0;
		top:50%;
		width: 6rpx;
		height: 40%;
		transform: translateY(-55%);
		background: rgba(55,128,239,0.27);
		border: 1px solid #0065FF;
		border-radius: 3px;
	}
</style>